<template>
	<view class="my">
		<view v-show="shownotice" class="noticeshow">
			<uni-notice-bar showClose showIcon text="风带来故事的种子, 时间使之发芽,AI模型需要花费大量人力和物力,没钱!没钱┭┮﹏┭┮"></uni-notice-bar>

		</view>
		<!-- 头部头像名称 -->
		<view class="my-header">
			<view class="">
				  <image class="headerbottomimg"
					:src="userInfo.provider === 'tel' || userInfo.provider === 'email'? `${baseurl}/${userInfo.imgUrl}` : `${userInfo.imgUrl}`"
					mode="aspectFill"></image>
				<transition
					  appear
					  name="animate__animated animate__bounce"
					  enter-active-class = "animate__bounceInUp"
					  leave-active-class = "animate__fadeOutDown"
				  >
				  <view class="headerbottommork"></view>	
				  </transition>
				
					
				
			</view>
			<view class="header-main">
				<view class="header-logo"  @tap="goConfig">
					<view class="logo-imgs">
						<transition
							  appear
						      name="animate__animated animate__bounce"
						      enter-active-class = "animate__lightSpeedInRight"
						      leave-active-class = "animate__fadeOutDown"
						  >
						  <image class="logo-img"
						  	:src="userInfo.provider === 'tel' || userInfo.provider === 'email'? `${baseurl}/${userInfo.imgUrl}` : `${userInfo.imgUrl}`"
						  	mode=""></image>
						  </transition>
					</view>

					<view class="logo-text">
						{{loginStatus? userInfo.nickname : "用户名称"}}
					</view>

				</view>
			</view>
		</view>


		<!-- 我的内容列表 -->
		<view class="my-content">
			      <!-- #ifdef H5 -->
			      <transition-group
			      			appear
			                  name="animate__animated animate__bounce"
			                  enter-active-class = "animate__fadeInUp"
			                  leave-active-class = "animate__fadeOutDown"
			              >
			      		  <view class="my-content-list" v-for="(item,index) in listtop" :key="item.id" >
			      			<uni-list-chat :title="item.title" :avatar="item.img1" :note="item.node"  badge-positon="left" badge-text="dot" clickable  @click="catchunilist(item.id)"></uni-list-chat>
			      			<mylines></mylines>
			      </view>
			      	  </transition-group>
			      <!-- #endif -->
			        <!-- #ifdef APP -->
			        <view class="my-content-list" v-for="(item,index) in listtop" :key="item.id" >
			        			<uni-list-chat :title="item.title" :avatar="item.img1" :note="item.node"  badge-positon="left" badge-text="dot" clickable  @click="catchunilist(item.id)"></uni-list-chat>
			        			<mylines></mylines>
			        </view>
			        <!-- #endif -->
			
		</view>
		<tarbar currentPage="my"></tarbar>
	</view>
</template>

<script>
	import mylines from '@/components/common/Lines.vue';
	import 'animate.css';
	import {
		mapState
	} from 'vuex';
	import tarbar from '@/common/tabbar.vue';
	export default {
		data() {
			return {
				baseurl:"https://zyc618.mynatapp.cc",
				istransitiongroup:false,
				shownotice:false,
				listtop: [{
						id: 0,
						img1: "../../static/tabBar/search/askquestion.png",
						title: "我的提问箱",
						node:"看看谁在关注我"
					},
					{
						id: 1,
						img1: "../../static/tabBar/tuijian.png",
						title: "我的推荐",
						node:"看看我将推荐过谁"
					},
					{
						id: 2,
						img1: "../../static/tabBar/1707645182469.jpg",
						title: "反馈",
						node:"进来吐槽一下,随便说说也行"
					},
					{
						id: 3,
						img1: "../../static/tabBar/space.png",
						title: "分享日常",
						node:"独立私人ip空间分享"
					},
					{
						id: 4,
						img1: "../../static/tabBar/ai.png",
						title: "我的AI",
						node:"我的自动聊天机器人"
					},
				]
			};
		},
		//计算属性:
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		components: {
			mylines,
			tarbar
		},
		methods: {
			goConfig() {
				this.navigateTo({
					url: `../my-config/my-config`
				})
			},
			goOrder() {
			},
			catchunilist(index){
				
				if(index == 0){
					//我的提问箱:
					this.navigateTo({
						url:"/pages/myanonymousquestion/myanonymousquestion"
					})
				}else if(index == 1){
					
				}else if(index == 2){
					//反馈:
					this.navigateTo({
						url:"/pages/feedback/feedback"
					})
				}else if(index == 3){
					//分享生活:
					this.navigateTo({
						url:"/pages/shareevery/shareevery"
					})
				}else if(index == 4){
					this.shownotice = ! this.shownotice;
				}
			}
		},
		onReady() {
		this.istransitiongroup = true
		}
	}
</script>

<style lang="scss">
	.noticeshow{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 77;
	}
	.my {
		padding-bottom: 120rpx;
		background-color: #f0f0f0;

		.my-header {
			position: relative;
			height:480rpx;
			width: 100%;
			.headerbottomimg{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				filter: blur(3px);
			}
			.headerbottommork{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #ffffff;
				opacity: 0.4;
				z-index: 2;
			}
			.header-main {
			
				.header-logo {
					position: absolute;
					z-index: 999;
					left:50% ;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
					.logo-imgs {
						display: flex;
						justify-content: center;
						
						.logo-img {
							overflow: hidden;
							width: 200rpx;
							height: 200rpx;
							border: 2rpx solid #ebebeb;
							border-radius: 150rpx;

						}
					}

					.logo-text {
						display: flex;
						justify-content: center;
						padding: 10rpx;
					}
				}
			}

		}

		
		.my-content {
			background-color: #f0f0f0;
			border-radius: 40rpx;
			position: relative;
			border: 1rpx solid #fff;
			overflow: hidden;
			width: 100%;
			position: absolute;
			top: 30%;
			z-index: 10000;
			.my-content-list {
				.my-content-item {
					display: flex;
					justify-content: space-between;
					padding: 0 10rpx;
					margin: 20rpx 0;

					.content {
						display: flex;

						.imgall {
							padding: 10rpx;

							.img {
								width: 30rpx;
								height: 30rpx;
							}

							margin-right: 15rpx;
						}

						.text {
							font-size: 32rpx;
							line-height: 56rpx;
						}
					}

					.imgs {
						padding: 10rpx;

						.img {
							width: 30rpx;
							height: 30rpx;
						}

					}
				}
			}
		}
	}
</style>